<template>
 <TreeVal :data="data"></TreeVal>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import TreeVal from '../components/Tree/index.vue';

// 递归组价
// 递归组件使用是需要自定义别名name,低版本的直接用文件名当组件名用
// 不管嵌套层级多深，只要有一个v-for就可以
// 具体使用参考tree组件
 
interface Tree {
  name:String,
  checked:boolean,
  children?:Tree[]
}
const data=reactive<Tree[]>([
  {
    name:'1',
    checked:false,
    children:[{
      name:'1-1',
    checked:false,
    }]
  },
  {
    name:'2',
    checked:true,
  },
  {
    name:'3',
    checked:false,
    children:[{
      name:'3-1',
    checked:false,
    children:[{
      name:'3-1-1',
    checked:false,
    },{
      name:'3-1-2',
    checked:false,
    }]
    }]
  },
])

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
